<template>
  <div class="create-folder">
    <mu-dialog
      width="492"
      :open.sync="openSimple"
      dialog-class="dialog-folder-create"
      :overlay-close="false"
      :overlay-opacity="0.9"
      overlay-color="#1F2433"
    >
      <div class="folder-create-head">
        <div class="title">新建文件夹</div>
        <img
          class="fork"
          src="https://image.xuexiwangzhe.com/Frs7X7n1cwtAvkcc0Tu3A1Ao_FkG"
          @click="changeSimpleDialog"
        />
      </div>
      <mu-form :model="newFolder">
        <mu-form-item>
          <mu-text-field
            class="folder-create-field"
            label="文件夹名"
            v-model="newFolder.folderName"
            label-float
          ></mu-text-field>
        </mu-form-item>
      </mu-form>
      <div class="folder-create-foot">
        <mu-button
          class="folder-create-cancel"
          color="#ffffff"
          round
          @click="changeSimpleDialog"
        >
          取消
        </mu-button>
        <mu-button
          class="folder-create-confirm"
          color="#265CFF"
          :disabled="!newFolder.folderName"
          round
          @click="confirm"
        >
          确定
        </mu-button>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      openSimple: false,
      newFolder: {
        folderName: "",
      },
    };
  },
  methods: {
    // 控制弹框显示隐藏
    changeSimpleDialog() {
      this.newFolder.folderName = "";
      this.openSimple = !this.openSimple;
    },
    confirm() {
      this.$axios
        .post("/folder/create", { name: this.newFolder.folderName })
        .then((res) => {
          if (res.success) {
            this.changeSimpleDialog();
            this.$emit("create-folder");
          }
        });
    },
  },
};
</script>

<style lang="less">
.dialog-folder-create {
  border-radius: 18px !important;
  color: #333333;

  .folder-create-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .title {
      font-size: 20px;
      font-weight: 600;
    }
    .fork {
      width: 14px;
      height: 14px;
    }
  }

  .folder-create-foot {
    display: flex;
    justify-content: flex-end;
  }
  .folder-create-cancel {
    color: #666666;
    border: 1px solid #666666;
    width: 120px;
    height: 30px;
    box-shadow: none !important;
  }
  .folder-create-confirm {
    width: 120px;
    height: 30px;
    box-shadow: none !important;
    margin-left: 21px;
  }
}
</style>
